<!DOCTYPE html>
<html lang="en">
{include file="user/public/header" /}

<body>
    <div class="container-scroller">
        {include file="user/public/navbar" /}
        <div class="container-fluid page-body-wrapper">
            {include file="user/public/sidebar" /}
            <div class="main-panel" id="apps">

                <div class="content-wrapper">
                    <div class="row">
                        <div class="col-md-12 grid-margin stretch-card" style="min-height: 450px;">
                            <div class="card">
                                <div class="card-body">
                                    <!-- <el-divider content-position="left">位置一</el-divider> -->
                                    <el-row>
                                        <el-col :span="21" style="text-align: center;">
                                            <el-button type="primary" @click="dialogVisible=true">添加基本信息</el-button>
                                        </el-col>
                                    </el-row>
                                     <span  v-for="(item,index) in kongbailist"  >{{item}}</span> 
                                
                                    <el-row>
                                        <el-col :span="21">
                                            <div id="seat_area">
                                                <div class="front">已选择{{selecttype}}</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="3" style="text-align: center;">
                                            <p style="text-align: center;">类型</p>

                                            <el-radio-group v-model="selecttype" class="radioImg">
                                                <el-radio  :label="999" border  >
                                                    <img style="width:100%"  src="http://wxsm.wxsushangw2.com/addons/choosefo/icon-custom.jpg" ></img>
                                                      <span style="font-size:11px;font-weight: 400;margin-top:5px ;">空白</span>
                                                </el-radio>
                                                <el-radio  :label="item.id" border  v-for="(item,index) in typelist" >
                                                  <img style="width:100%" :src="item.logo" ></img>
                                                  <span style="font-size:11px;font-weight: 400;margin-top:5px ;">{{item.name}}</span>
                                                </el-radio>
                                              
                                              </el-radio-group>   
                                         
                                        </el-col>
                                      

                                      
                                    </el-row>

                                </div>
                            </div>
                        </div>

                    </div>



                </div>


                <el-dialog v-model="dialogVisible" title="Tips" width="50%">
                    <el-form label-width="120px" style="width: 90%;padding-top: 10px;">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="横坐标">
                                    <el-input style="width: 400px;" v-model="username" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="纵坐标">
                                    <el-input style="width: 400px;" v-model="username" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="默认类型">
                                    <el-select placeholder="请选择" v-model="defoulttype">
                                        <el-option label="观音" value="1" />
                                        <el-option label="菩提" value="2" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>






                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">Cancel</el-button>
                            <el-button type="primary" @click="dialogVisible = false">
                                Confirm
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
                <!-- main-panel ends -->
            </div>
        </div>

        {include file="user/public/footer" /}


        <style type="text/css">
 .radioImg .el-radio__input {
    display: none;
  }
  .radioImg .el-radio__inner {
    display: none;
  }
  .radioImg .el-radio .is-bordered {
    padding: 0px;
  }
  .radioImg .v-image {
    border-radius: 4px;
  }
  .radioImg .el-radio {
    margin: 10px;
    margin-bottom: 20px;
    height: 60px;width:60px;
  }
  .radioImg .el-radio__label div {
    margin: -26px 0px 0px -10px;
  }
  .radioImg .el-radio__label .v-image__image {
    margin: 0;
  }
  .radioImg .el-radio.is-bordered + .el-radio.is-bordered {
    margin: 10px;
  }
  .radioImg .el-radio.is-bordered {
    padding: 0;
  }
  .radioImg .el-radio__label {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    white-space: normal;
  }
  .radioImg {
    justify-content: center;
  }
  
  
 


            .front {
                width: 95%;
                margin: 5px 32px 45px 32px;
                background-color: #f0f0f0;
                color: #666;
                text-align: center;
                padding: 3px;
                border-radius: 5px;
            }

            .booking_area {
                float: right;
                position: relative;
                width: 200px;
                height: 450px;
            }

            .booking_area h3 {
                margin: 5px 5px 0 0;
                font-size: 16px;
            }

            .booking_area p {
                line-height: 26px;
                font-size: 16px;
                color: #999
            }

            .booking_area p span {
                color: #666
            }

            div.seatCharts-cell {
                color: #182C4E;
                height: 25px;
                width: 25px;
                line-height: 25px;
                margin: 3px;
                float: left;
                text-align: center;
                outline: none;
                font-size: 13px;
            }

            div.seatCharts-seat {
                color: #fff;
                cursor: pointer;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            }

            div.seatCharts-row {
                height: 35px;
            }

            div.seatCharts-seat.available {
                background-color: #B9DEA0;
            }

            div.seatCharts-seat.focused {
                background-color: #76B474;
                border: none;
            }

            div.seatCharts-seat.selected {
                background-color: #E6CAC4;
            }

            div.seatCharts-seat.unavailable {
                background-color: #472B34;
                cursor: not-allowed;
            }

            div.seatCharts-container {
                border-right: 1px dotted #adadad;
                width: 98%;
                padding: 20px;
                float: left;
            }

            div.seatCharts-legend {
                padding-left: 0px;
                position: absolute;
                bottom: 16px;
            }

            ul.seatCharts-legendList {
                padding-left: 0px;
            }

            .seatCharts-legendItem {
                float: left;
                width: 90px;
                margin-top: 10px;
                line-height: 2;
            }

            span.seatCharts-legendDescription {
                margin-left: 5px;
                line-height: 30px;
            }

            .checkout-button {
                display: block;
                width: 80px;
                height: 24px;
                line-height: 20px;
                margin: 10px auto;
                border: 1px solid #999;
                font-size: 14px;
                cursor: pointer
            }

            #seats_chose {
                max-height: 150px;
                overflow-y: auto;
                overflow-x: none;
                width: 200px;
            }

            #seats_chose li {
                float: left;
                width: 72px;
                height: 26px;
                line-height: 26px;
                border: 1px solid #d3d3d3;
                background: #f7f7f7;
                margin: 6px;
                font-size: 14px;
                font-weight: bold;
                text-align: center
            }
        </style>
        <script type="text/javascript" src="https://www.jq22.com/demo/jQuery-xz-150409194726/jquery.seat-charts.min.js">
        </script>

        <script type='text/javascript'>
            const App = {
                data() {
                    return {
                        dialogVisible: false,
                        defoulttype: "",
                        selecttype:'',
                        typelist:[],
                        kongbailist:[],
                    };
                },


                mounted() {
                    var that=this;
                    var sc = $('#seat_area').seatCharts({

                        map: [ //座位结构图 a 代表座位; 下划线 "_" 代表过道

                            'cccccccccc',

                            'cccccccccc',

                            '__________',

                            'cccccccc__',

                            'cccccccccc',

                            'cccccccccc',

                            'cccccccccc',

                            'cccccccccc',

                            'cccccccccc',

                            'cc__cc__cc'

                        ],

                        naming: { //设置行列等信息

                            top: true, //不显示顶部横坐标（行） 

                            getLabel: function (character, row, column) { //返回座位信息 

                                return column;

                            }

                        },

                        legend: { //定义图例

                            node: $('#legend'),

                            items: [

                                ['c', 'available', '可选座'],

                                ['c', 'unavailable', '已售出']

                            ]

                        },

                        click: function () {

                            if (this.status() == 'available') { //若为可选座状态，添加座位
                                var selecttype=that.selecttype;

                                $('<li>' + (this.settings.row + 1) + '排' + this.settings.label +
                                        '座</li>')

                                    .attr('id', 'cart-item-' + this.settings.id)

                                    .data('seatId', this.settings.id)

                                //  .appendTo($cart);

                                //  $tickects_num.text(sc.find('selected').length + 1); //统计选票数量

                                //  $total_price.text(getTotalPrice(sc) + price); //计算票价总金额
                                if(selecttype==999)
                                {
                                    that.kongbailist.push(this.settings.id)
                                    return 'seatCharts-cell seatCharts-space';
                                }else
                                {
                                    return 'selected';
                                }
                                    


                            } else if (this.status() == 'selected') { //若为选中状态
                                var selecttype=that.selecttype;

                                if(selecttype==999)
                                {
                                    return 'seatCharts-cell seatCharts-space';
                                }else
                                {
                                    return 'available';
                                }

                                // $tickects_num.text(sc.find('selected').length - 1); //更新票数量

                                // $total_price.text(getTotalPrice(sc) - price); //更新票价总金额

                                // $('#cart-item-' + this.settings.id).remove(); //删除已预订座位


                                // return 'available';

                            } else if (this.status() == 'unavailable') { //若为已售出状态

                                return 'unavailable';

                            } else {

                                return this.style();

                            }

                        }

                    });

                    //设置已售出的座位
              // setTimeout(() => {
                    sc.get(['1_3', '1_4', '4_4', '4_5', '4_6', '4_7', '4_8']).status('unavailable');
              //  }, 1000);
                   


                },
                created() {
                    this.GetSetType()
                },
                methods: {
                    onSubmit() {

                        $.ajax({
                            type: 'POST',
                            url: '/demo/user/update',
                            data: {
                                phone: "1",
                                age: 1
                            },
                            success: function (data) {
                                //请求成功函数内容
                            },
                            error: function (jqXHR) {
                                //请求失败函数内容
                            }
                        });

                    },
                    GetSetType(){
                        var that=this;
                        $.ajax({
                            url: '/demo/user/getsetlist',
                            success: function (data) {
                                that.typelist=data.data;
                            },
                        });
                    }
                }
            };
            const app = Vue.createApp(App);
            app.use(ElementPlus);
            app.mount("#apps");
        </script>





</body>

</html>